/*!
 * TOAST UI Date Picker
 * @version 4.3.0
 * @author NHN. FE Development Lab <dl_javascript@nhn.com>
 * @license MIT
 */
 @charset "utf-8";
 .tui-calendar {
     position: relative;
     background-color: #fff;
     border: 1px solid #aaa;
     width: 274px;
     * {
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
     }
     div {
         text-align: center;
     }
     caption {
         padding: 0;
         span {
             overflow: hidden;
             position: absolute;
             clip: rect(0 0 0 0);
             width: 1px;
             height: 1px;
             margin: -1px;
             padding: 0;
         }
     }
     button {
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
     }
     .tui-calendar-header {
         position: relative;
         border-bottom: 1px solid #efefef;
     }
     .tui-calendar-header-inner {
         padding: 17px 50px 15px;
         height: 50px;
     }
     .tui-calendar-title-today {
         height: 30px;
         margin: 0;
         font-size: 12px;
         line-height: 34px;
         color: #777;
         background-color: #f4f4f4;
         &:hover {
             color: #333;
             background-color: #edf4fc;
             cursor: pointer;
         }
     }
     .tui-calendar-title {
         display: inline-block;
         font-size: 18px;
         font-weight: normal;
         font-style: normal;
         line-height: 1;
         color: #333;
         cursor: default;
         vertical-align: top;
     }
     .tui-calendar-btn-prev-month {
         left: 0;
         &:after {
             overflow: hidden;
             position: absolute;
             top: 50%;
             margin-top: -5px;
             line-height: 400px;
             background: url() no-repeat;
             content: '';
             width: 6px;
             height: 11px;
             left: 50%;
             margin-left: -3px;
             background-position: 0 0;
         }
     }
     .tui-calendar-btn-next-month {
         right: 0;
         &:after {
             overflow: hidden;
             position: absolute;
             top: 50%;
             margin-top: -5px;
             line-height: 400px;
             background: url() no-repeat;
             content: '';
             width: 6px;
             height: 11px;
             right: 50%;
             margin-right: -3px;
             background-position: -8px 0;
         }
     }
     .tui-calendar-btn-prev-year {
         left: 0;
         &:after {
             overflow: hidden;
             position: absolute;
             top: 50%;
             margin-top: -5px;
             line-height: 400px;
             background: url() no-repeat;
             content: '';
             width: 11px;
             height: 10px;
             left: 50%;
             margin-left: -6px;
             background-position: -16px -36px;
         }
     }
     .tui-calendar-btn-next-year {
         right: 0;
         &:after {
             overflow: hidden;
             position: absolute;
             top: 50%;
             margin-top: -5px;
             line-height: 400px;
             background: url() no-repeat;
             content: '';
             width: 11px;
             height: 10px;
             right: 50%;
             margin-right: -6px;
             background-position: -16px -49px;
         }
     }
     .tui-calendar-has-btns {
         .tui-calendar-btn-prev-year {
             left: 10px;
         }
         .tui-calendar-btn-next-year {
             right: 10px;
         }
         .tui-calendar-btn-prev-month {
             left: 44px;
         }
         .tui-calendar-btn-next-month {
             right: 44px;
         }
     }
     .tui-calendar-body-header {
         th {
             color: #777;
         }
     }
     .tui-calendar-body-inner {
         width: 100%;
         margin: 0 auto;
         table-layout: fixed;
         border-collapse: collapse;
         text-align: center;
         font-size: 12px;
     }
     th {
         font-weight: normal;
         cursor: default;
         height: 39px;
         text-align: center;
         color: #999;
     }
     td {
         height: 39px;
         text-align: center;
         color: #999;
     }
     .tui-is-blocked {
         &:hover {
             cursor: default;
         }
     }
     .tui-calendar-month {
         width: 25%;
         height: 50px;
     }
     .tui-calendar-today {
         color: #4b96e6;
     }
     .tui-calendar-prev-month {
         color: #ccc;
     }
     .tui-calendar-next-month {
         color: #ccc;
     }
     .tui-calendar-prev-month.tui-calendar-date {
         visibility: hidden;
     }
     .tui-calendar-next-month.tui-calendar-date {
         visibility: hidden;
     }
     .tui-calendar-btn-choice {
         background-color: #4b96e6;
     }
     .tui-calendar-btn-close {
         background-color: #777;
     }
     .tui-calendar-year {
         width: 25%;
         height: 50px;
     }
 }
 .tui-datepicker-dropdown {
     button {
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
     }
     .tui-ico-check {
         overflow: hidden;
         display: inline-block;
         width: 1px;
         height: 1px;
         line-height: 300px;
         background: url() no-repeat;
     }
     display: inline-block;
     width: 120px;
     position: relative;
     .tui-dropdown-button {
         width: 100%;
         height: 28px;
         padding: 0 10px;
         font-size: 12px;
         line-height: 20px;
         border: 1px solid #ddd;
         padding: 0 30px 0 10px;
         text-align: left;
         background: #fff;
         cursor: pointer;
     }
     .tui-ico-caret {
         position: absolute;
         top: 12px;
         right: 10px;
     }
     .tui-dropdown-menu {
         display: none;
         position: absolute;
         top: 27px;
         left: 0;
         right: 0;
         width: 100%;
         padding: 5px 0;
         margin: 0;
         overflow-y: auto;
         min-width: 0;
         max-height: 198px;
         font-size: 12px;
         border: 1px solid #ddd;
         border-top-color: #fff;
         z-index: 10;
         box-sizing: border-box;
         box-shadow: none;
         border-radius: 0;
     }
     .tui-menu-item {
         position: relative;
         overflow: hidden;
         position: relative;
         height: 28px;
         line-height: 28px;
         background-color: #fff;
         z-index: 10;
         .tui-ico-check {
             display: none;
             overflow: hidden;
             position: absolute;
             width: 10px;
             height: 8px;
             top: 10px;
             left: 10px;
             background-position: -31px -54px;
             z-index: 10;
             content: 'aaa';
         }
     }
     .tui-menu-item-btn {
         position: relative;
         width: 100%;
         font-size: 12px;
         font-weight: normal;
         line-height: 28px;
         padding: 0 10px 0 30px;
         text-align: left;
         color: #333;
         background-color: #fff;
         border: 0;
         cursor: pointer;
         z-index: 9;
         &:hover {
             color: #333;
             background-color: #f4f4f4;
         }
     }
     .tui-menu-item.tui-is-selected {
         .tui-ico-check {
             display: block;
         }
         .tui-menu-item-btn {
             font-weight: bold;
         }
     }
 }
 .tui-datepicker-selector {
     button {
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
     }
     padding: 10px;
     font-size: 0;
     text-align: center;
     border-bottom: 1px solid #eee;
 }
 .tui-ico-date {
     overflow: hidden;
     display: inline-block;
     width: 1px;
     height: 1px;
     line-height: 300px;
     background: url() no-repeat;
     width: 12px;
     height: 12px;
     background-position: -17px 0;
 }
 .tui-ico-time {
     overflow: hidden;
     display: inline-block;
     width: 1px;
     height: 1px;
     line-height: 300px;
     background: url() no-repeat;
     width: 12px;
     height: 12px;
     background-position: 0 -30px;
 }
 .tui-ico-caret {
     overflow: hidden;
     display: inline-block;
     width: 1px;
     height: 1px;
     line-height: 300px;
     background: url() no-repeat;
     width: 7px;
     height: 4px;
     background-position: 0 -58px;
 }
 .tui-calendar-month {
     width: 202px;
     .tui-calendar-body {
         width: 202px;
         margin: 0 auto;
     }
 }
 .tui-calendar-year {
     width: 202px;
     .tui-calendar-body {
         width: 202px;
         margin: 0 auto;
     }
 }
 .tui-calendar-btn {
     overflow: hidden;
     position: absolute;
     top: 0;
     width: 32px;
     height: 50px;
     line-height: 400px;
     z-index: 10;
     cursor: pointer;
     border: none;
     background-color: #fff;
 }
 .tui-calendar.tui-calendar-month {
     .tui-calendar-btn-prev-year {
         &:after {
             width: 6px;
             height: 11px;
             left: 50%;
             margin-left: -3px;
             background-position: 0 0;
         }
         width: 50px;
     }
     .tui-calendar-btn-next-year {
         &:after {
             width: 6px;
             height: 11px;
             right: 50%;
             margin-right: -3px;
             background-position: -8px 0;
         }
         width: 50px;
     }
 }
 .tui-calendar.tui-calendar-year {
     .tui-calendar-btn-prev-year {
         &:after {
             width: 6px;
             height: 11px;
             left: 50%;
             margin-left: -3px;
             background-position: 0 0;
         }
         width: 50px;
     }
     .tui-calendar-btn-next-year {
         &:after {
             width: 6px;
             height: 11px;
             right: 50%;
             margin-right: -3px;
             background-position: -8px 0;
         }
         width: 50px;
     }
 }
 .tui-datepicker {
     border: 1px solid #aaa;
     background-color: white;
     position: absolute;
     * {
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
     }
     .tui-calendar {
         border: 0;
     }
     .tui-calendar-title {
         cursor: pointer;
     }
     .tui-calendar-title.tui-calendar-title-year-to-year {
         cursor: auto;
     }
     .tui-is-blocked {
         cursor: default;
         color: #ddd;
     }
     .tui-is-valid {
         color: #999;
     }
     .tui-is-selectable {
         &:hover {
             background-color: #edf4fc;
             cursor: pointer;
         }
     }
     .tui-is-selectable.tui-is-selected {
         background-color: #4b96e6;
         color: #fff;
     }
 }
 .tui-datepicker-type-date {
     width: 274px;
 }
 .tui-datepicker-body {
     .tui-calendar-month {
         width: auto;
     }
     .tui-calendar-year {
         width: auto;
     }
     .tui-timepicker {
         width: 274px;
         position: static;
         padding: 20px 46px 20px 47px;
         border: 0;
     }
 }
 .tui-datepicker-footer {
     .tui-timepicker {
         width: 274px;
         position: static;
         padding: 20px 46px 20px 47px;
         border: 0;
         border-top: 1px solid #eee;
     }
 }
 .tui-datepicker-selector-button {
     width: 50%;
     height: 26px;
     font-size: 12px;
     line-height: 23px;
     border: 1px solid #ddd;
     background-color: #fff;
     color: #777;
     outline: none;
     cursor: pointer;
     [class^=tui-ico-] {
         margin: 5px 9px 0 0;
         vertical-align: top;
     }
 }
 .tui-datepicker-selector-button.tui-is-checked {
     background-color: #eee;
     color: #333;
     .tui-ico-date {
         background-position: -17px -14px;
     }
     .tui-ico-time {
         background-position: 0 -44px;
     }
 }
 .tui-datepicker-selector-button+.tui-datepicker-selector-button {
     margin-left: -1px;
 }
 .tui-datepicker-input.tui-has-focus {
     .tui-ico-date {
         background-position: -17px -14px;
     }
     border-color: #aaa;
 }
 .tui-datepicker-area {
     position: relative;
 }
 .tui-datepicker-input {
     position: relative;
     display: inline-block;
     width: 120px;
     height: 28px;
     vertical-align: top;
     border: 1px solid #ddd;
     * {
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
     }
     >input {
         width: 100%;
         height: 100%;
         padding: 6px 27px 6px 10px;
         font-size: 12px;
         line-height: 14px;
         vertical-align: top;
         border: 0;
         color: #333;
     }
     >.tui-ico-date {
         position: absolute;
         top: 50%;
         right: 8px;
         margin: -6px 0 0 0;
     }
 }
 .tui-datetime-input {
     width: 170px;
 }
 .tui-datepicker.tui-rangepicker {
     .tui-is-selectable.tui-is-selected {
         background-color: #4b96e6;
         color: #fff;
     }
     .tui-is-selected-range {
         background-color: #edf4fc;
     }
 }
 .tui-datepicker-dropdown.tui-is-open {
     .tui-dropdown-button {
         display: block;
         display: block;
         border-color: #aaa;
     }
     .tui-dropdown-menu {
         display: block;
         border-color: #aaa;
     }
     .tui-ico-caret {
         background-position: -21px -28px;
     }
 }
 .tui-menu-item-btn {
     &:focus {
         color: #333;
         background-color: #f4f4f4;
     }
     &:active {
         color: #333;
         background-color: #f4f4f4;
     }
 }
 .tui-dropdown-area {
     font-size: 0;
     .tui-datepicker-dropdown+.tui-datepicker-dropdown {
         margin-left: 5px;
     }
 }
 .tui-hidden {
     display: none;
 }
 